<template>
  <div id="chart">
  </div>
</template>

<script>
import {Graph} from '@antv/x6'

const data = {
  nodes: [
    {
      id: 'node1', // String，可选，节点的唯一标识
      x: 40,       // Number，必选，节点位置的 x 值
      y: 40,       // Number，必选，节点位置的 y 值
      width: 80,   // Number，可选，节点大小的 width 值
      height: 40,  // Number，可选，节点大小的 height 值
      label: 'hello', // String，节点标签
      shape: 'ellipse',
      attrs: {
        body: {
          stroke: 'orange', // 边框的颜色
          fill: 'darkblue',
        },
        label: {
          fill: 'white'
        }
      }
    },
    {
      id: 'node2', // String，节点的唯一标识
      x: 160,      // Number，必选，节点位置的 x 值
      y: 180,      // Number，必选，节点位置的 y 值
      width: 80,   // Number，可选，节点大小的 width 值
      height: 40,  // Number，可选，节点大小的 height 值
      label: 'world', // String，节点标签
    },
  ],
  edges: [
    {
      source: 'node1',
      target: 'node2',
      shape: 'double-edge',
      attrs: {
        line: {
          stroke: 'pink'
        }
      }
    },
  ],
};

export default {
  name: 'About',
  methods: {
    createGraph() {
      const graph = new Graph({
        container: document.getElementById('chart'),
        width: window.innerWidth,
        height: window.innerHeight,
        background: {
          color: '#fffbe6', // 画布颜色
        },
        grid: {
          size: 10,
          visible: true
        }
      })
      graph.fromJSON(data)
    }
  },
  mounted() {
    this.createGraph()
  }
}
</script>
